<template>
  <div>
    <!-- 订单详情结构 -->
    <div class="orderDetail">
      <el-card class="box-card">
        <!-- 卡片顶部区域 -->
        <template #header>
          <div class="card-header">
            <span>挂号详情</span>
          </div>
        </template>
        <!-- 卡片的主体内容区域 -->
        <div class="center">
          <!-- 内容顶部区域 -->
          <div class="top">
            <div class="top-left">
              <el-tag class="ml-2" type="success">
                <div class="succ">
                  <el-icon><Select /></el-icon>
                  <span>{{ orderInfo.param?.orderStatusString }}</span>
                </div>
              </el-tag>
            </div>
            <div class="top-right">
              <img src="../../../../assets/images/code_login_wechat.png" />
              <div class="tip">
                <p class="icon">
                  微信
                  <svg
                    t="1706719676668"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4834"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M693.12 347.264c11.776 0 23.36 0.896 35.008 2.176-31.36-146.048-187.456-254.528-365.696-254.528C163.2 94.912 0 230.656 0 403.136c0 99.52 54.272 181.248 145.024 244.736L108.8 756.864l126.72-63.488c45.312 8.896 81.664 18.112 126.912 18.112 11.392 0 22.656-0.512 33.792-1.344-7.04-24.256-11.2-49.6-11.2-76.032C385.088 475.776 521.024 347.264 693.12 347.264zM498.304 249.024c27.392 0 45.376 17.984 45.376 45.248 0 27.136-17.984 45.312-45.376 45.312-27.072 0-54.336-18.176-54.336-45.312C443.968 266.944 471.168 249.024 498.304 249.024zM244.672 339.584c-27.2 0-54.592-18.176-54.592-45.312 0-27.264 27.392-45.248 54.592-45.248S289.92 266.944 289.92 294.272C289.92 321.408 271.872 339.584 244.672 339.584zM1024 629.76c0-144.896-145.024-262.976-307.904-262.976-172.48 0-308.224 118.144-308.224 262.976 0 145.28 135.808 262.976 308.224 262.976 36.096 0 72.512-9.024 108.736-18.112l99.392 54.528-27.264-90.624C969.728 783.872 1024 711.488 1024 629.76zM616.128 584.384c-17.984 0-36.224-17.92-36.224-36.224 0-18.048 18.24-36.224 36.224-36.224 27.52 0 45.376 18.176 45.376 36.224C661.504 566.464 643.648 584.384 616.128 584.384zM815.488 584.384c-17.856 0-36.032-17.92-36.032-36.224 0-18.048 18.112-36.224 36.032-36.224 27.264 0 45.376 18.176 45.376 36.224C860.864 566.464 842.752 584.384 815.488 584.384z"
                      fill="#31a739"
                      p-id="4835"
                    ></path>
                  </svg>
                  关注"北京114预约挂号"
                </p>
                <p>"快速预约挂号"</p>
              </div>
            </div>
          </div>
          <!-- 内容中心区域 -->
          <div class="content-center">
            <!-- 中心区域的左侧部分 -->
            <div class="content-center-left">
              <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就诊人信息</div>
                  </template>
                  {{ orderInfo.patientName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就诊日期</div>
                  </template>
                  {{ orderInfo.reserveDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就诊医院</div>
                  </template>
                  {{ orderInfo.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就诊科室</div>
                  </template>
                  {{ orderInfo.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">医生职称</div>
                  </template>
                  {{ orderInfo.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">医生服务费</div>
                  </template>
                  <span style="color: red; font-weight: 700">{{ orderInfo.amount }}元</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">挂号单号</div>
                  </template>
                  {{ orderInfo.outTradeNo }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">挂号时间</div>
                  </template>
                  {{ orderInfo.createTime }}
                </el-descriptions-item>
              </el-descriptions>
              <!-- 两个按钮的区域 -->
              <div
                class="btn"
                v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1">
                <el-popconfirm
                  width="200"
                  title="你确定要取消订单吗?"
                  @confirm="cancelOrder"
                >
                  <template #reference>
                    <el-button type="default">取消预约</el-button>
                  </template>
                </el-popconfirm>
                <el-button type="primary" v-if="orderInfo.orderStatus == 0" @click="openDialog">支付</el-button
                >
              </div>
            </div>
            <!-- 中心区域的右侧部分 -->
            <div class="content-center-right">
              <el-card class="box-card" shadow="never">
                <template #header>
                  <div class="card-header">
                    <span style="font-size: 14px">注意事项</span>
                  </div>
                </template>
                <div class="message">
                  <p>
                    1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担;
                  </p>
                  <p style="color: red">
                    2.【取号】就诊当天需在{{
                      orderInfo.fetchTime
                    }}在医院取号，未取号视为爽约，该号不退不换;
                  </p>
                  <p>
                    3.【退号】在{{
                      orderInfo.quitTime
                    }}前可在线退号，逾期将不可办理退号退费;
                  </p>
                  <p>
                    4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号;
                  </p>
                  <p>
                    5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
                  </p>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 支付对话框结构 -->
    <div class="QRCODE">
      <el-dialog
        v-model="dialogVisible"
        title="微信支付"
        width="30%"
        @close="closeDialog"
      >
        <div class="qrcode">
          <img :src="imgUrl" alt="支付二维码">
          <p>请使用微信扫一扫</p>
          <p>扫描二维码支付</p>
        </div>
        <template #footer>
          <el-button @click="closeDialog">关闭窗口</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Select } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
// 引入路由
import { useRoute,useRouter } from "vue-router";
// 引入API
import { reqOrderInfo, reqCancelOrder, reqQrcode, reqPayResult } from "@/api/user";
// 引入ts类型
import { OrderInfoResponseData, qrcodeInfoResponseData, payResultResponseData } from "@/api/user/type";
import { ElMessage } from "element-plus";
// 引入生成二维码所需的插件
//@ts-ignore
import QRCode from 'qrcode'

// 获取路由对象
let route = useRoute();
let router = useRouter();
// 存储订单详情数据
let orderInfo = ref<any>({});
// 控制对话框的显示与隐藏
let dialogVisible = ref<boolean>(false)
// 存储二维码的URL地址
let imgUrl = ref<string>('')
// 定义一个定时器
let timer = ref<any>()
// 组件挂载完毕获取数据
onMounted(() => {
  getOrderInfo();
});
// 封装一个方法获取订单详情数据
const getOrderInfo = async () => {
  const result: OrderInfoResponseData = await reqOrderInfo(
    route.query.orderId as string
  );
  if (result.code == 200) {
    orderInfo.value = result.data;
  } else {
    ElMessage({
      type: "error",
      message: "获取订单详情失败!",
    });
  }
};
// 确定取消订单的回调
const cancelOrder = async () => {
  try {
    // 取消订单成功
    await reqCancelOrder(route.query.orderId as string);
    // 路由回退
    router.back()
    // 重新获取订单详情
    getOrderInfo();
  } catch (error) {
    ElMessage({
      type: "error",
      message: "取消预约失败",
    });
  }
};
// 点击支付按钮打开支付对话框的回调
const openDialog = async ()=>{
  // 打开对话框
  dialogVisible.value = true
  // 发请求获取支付二维码
  const result: qrcodeInfoResponseData = await reqQrcode(route.query.orderId as string);
  if(result.code == 200){
    // 请求成功生成二维码地址
    imgUrl.value = await QRCode.toDataURL(result.data.codeUrl)
  }else{
    ElMessage({
      type:'error',
      message:'获取二维码失败!'
    })
  }
  // 每过2秒 获取一次支付状态
  timer.value = setInterval( async ()=>{
    const result: payResultResponseData = await reqPayResult(route.query.orderId as string)
    if(result.data){
      // 支付成功,关闭对话框
      dialogVisible.value = false
      // 提示信息
      ElMessage({
        type:'success',
        message:'支付成功'
      })
      // 清除定时器
      clearInterval(timer.value)
      // 重新获取订单详情
      getOrderInfo();
    }
  },2000)
}
// 关闭窗口的回调
const closeDialog = ()=>{
  // 关闭对话框
  dialogVisible.value = false
  // 清除定时器
  clearInterval(timer.value)
}
</script>

<style scoped>
.orderDetail {
  margin-top: 20px;
  .box-card {
    .center {
      .top {
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
        .top-left {
          .succ {
            display: flex;
            align-items: center;
            span {
              margin-left: 5px;
            }
          }
        }
        .top-right {
          display: flex;
          img {
            width: 40px;
            height: 40px;
          }
          .tip {
            font-size: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 7px;
            .icon {
              display: flex;
              align-items: center;
              svg {
                margin: 0px 2px;
              }
            }
          }
        }
      }
      .content-center {
        margin-top: 20px;
        display: flex;
        .content-center-left {
          flex: 4;
          margin-right: 20px;
          .btn {
            margin-top: 14px;
          }
        }
        .content-center-right {
          flex: 6;
          .message {
            font-size: 14px;
            p {
              line-height: 1.6;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
}
.QRCODE{
  .qrcode{
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      width: 250px;
      height: 250px;
      margin-bottom: 20px;
    }
    p{
      line-height: 25px;
    }
  }
}
::v-deep(.el-dialog__body){
  border-top:1px solid #e5e5e5 ;
  border-bottom:1px solid #e5e5e5;
}
</style>